<template>
    <div class="code-container">
        <div class="markdown-body" v-html="safeHtml"></div>
    </div>
</template>

<script>
import { marked } from "marked"
import DOMPurify from "dompurify"
import "highlight.js/styles/github.css"
import "github-markdown-css"
export default {
    props: {
        markdownSrc: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            rawMarkdown: "", // 原始Markdown内容
        }
    },
    mounted() {
        this.getMarkDown()
    },
    computed: {
        safeHtml() {
            if (!this.rawMarkdown) return ""
            return DOMPurify.sanitize(marked(this.rawMarkdown))
        },
    },
    methods: {
        // 获取Markdown文件内容
        async getMarkDown() {
            const res = await fetch(`/${this.markdownSrc}.md`) // MD文件需放 public 目录
            console.log(res)
            this.rawMarkdown = await res.text()
        },
    },
}
</script>
